<template>
  <div class="main">
    <div class="body">
        <div class="return">
            <div class="r-main">
                <div id="r-body">
                    <div class="bodymain">
                        <div class="bodymaintop">
                            <div>全体用户</div>
                        </div>
                        <div class="bodymainmain">
                            <div class="room" ref="room">
                            </div>
                            <div class="talk">
                                <div class="write" contenteditable="true" ref="text"></div>
                                <button class="send" @click="handleSendBtnClick()">发送</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import jwtDecode from 'jwt-decode'
// const ws = new WebSocket('123.57.251.41:8080/websocket/17');
export default {
    name:"message",
    data () {
        return {
            path:"ws://123.57.251.41:8080/websocket/17",
            socket:""
        }
    },
    mounted(){
        this.init();
        // oSendBtn.addEventListener('click',this.handleSendBtnClick,false);
        // ws.addEventListener("open",this.handleOpen.bind(this),false);
        // ws.addEventListener("close",this.handleClose.bind(this),false);
        // ws.addEventListener("error",this.handleError.bind(this),false);
        // ws.addEventListener("message",this.handleMessage.bind(this),false);
    },
    methods:{
        init: function () {
            if(typeof(WebSocket) === "undefined"){
                alert("您的浏览器不支持socket")
            }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket错误信息
                this.socket.onerror = this.error
                // 监听socket消息
                this.socket.onmessage = this.getMessage
            }
        },
        handleSendBtnClick(){
            const msg = this.$refs.text.innerHTML;
            if(!msg.trim().length){
                return;
            }
            // let token = sessionStorage.getItem("token");
            // let user = decodeURIComponent(escape(window.atob(token.split('.')[1])));
            // let res = JSON.parse(user).name;
            // console.log("token",res);
            var message = jwtDecode(sessionStorage.getItem("token"));
            console.log('decode',message)
            console.log('id',message.userId)
            // let res = JSON.parse(user).virtualPhone 
            this.socket.send(
                JSON.stringify({
                    "linkId": 0,
                    "fromUser": message.userId,
                    "toUser": 0,
                    "content": msg,
                    "type": 1,
                    "nickname": message.nickname,
                    "avatar": message.img
                })
            );
            this.$refs.text.innerHTML = ''
        },
        open: function(e){
            console.log("Websocket open",e);
        },
        close: function(e){
            console.log("Websocket close",e);
        },
        error: function(e){
            console.log("Websocket error",e);
        },
        getMessage: function(e){
            console.log("Websocket message");
            const msgData = typeof e.data =='string' ? JSON.parse(e.data) :e.data;
            console.log(msgData)
            // const msgData = e.data;
            this.$refs.room.appendChild(this.createMsg(msgData))
        },
        createMsg(data){
            console.log(data)
            const {userImg,fromUserId,sendUser,toUserId,content,sendTime} = data;
            const oItem = document.createElement('div');
                oItem.innerHTML = `
                <div class="mine" style="text-align: left;">
                    <div class="usermessage" style="height: 40px;margin: 10px;">
                        <img class="headphoto" style="display: inline;width: 40px;height: 40px;border-radius: 20px;" src="${userImg}">
                        <div class="usernamediv" style="width: 200px;height: 50px;font-size: 12px;margin-top: -30px;margin-left: 50px;">${ sendUser }</div>
                    </div>
                    <div class="messagediv" style="margin-bottom: 20px;"><span class="message" style="padding: 10px;margin-left: 40px;border-radius: 10px;color: white;background-color: #65b4fd;border: 1px solid #46a6ff;margin-bottom: 100px;font-size:14px;">${ content }</span></div>
                </div>
                `;
            // <i class="time">${ new Date(dateTime) }</i>
            return oItem
        }
    },
    destroyed () {
        // 销毁监听
        this.socket.onclose = this.close
    }
}
</script>

<style lang="less" scoped>
*{
    box-sizing: border-box;
}
td{
    text-align: center;
}
tr{
    border-bottom: 1px solid gray;
}
input{
    outline: none;
}
body{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
/* 主体页面自适应与分布 */
.main{
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    max-width: 2400px;
    max-height: 1600px;
    min-width: 1200px;
    min-height: 800px;
    background-color:rgb(240, 240, 240);
    overflow: hidden;
    position: relative;
}
.body{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0%;
    left: 0%;
}
.photo {
    height: 100vh;
}
.return{
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 2% 5%;
    background-color: rgba(255,255,255,0.5);
    display: grid;
    grid-template-areas: "main";
    grid-template-columns: 1fr;
    gap: 12px;
}
.r-main{
    grid-area: main;
    display: grid;
    grid-template-areas: "body";
    grid-template-rows: 1fr;
}
#r-body{
    grid-area: body;
    display: block;
    background-color: rgba(255,255,255,0.9);
    margin: 12px 12px 55px 0;
    border-radius: 6px;
}
.bodymain{
    width: 100%;
    height: 100%;
    float: left;
}
.bodymaintop{
    width: 100%;
    height: 5%;
    border-bottom: 1px solid #d0d0d0;
}
.bodymaintop div{
    width: 60%;
    height: 100%;
    margin: 0 20%;
    padding: 5px;
    text-align: center;
    font-size: 14px;
}
.bodymainmain{
    width: 100%;
    height: 95%;
}
.room{
    width: 100%;
    height: 70%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #F0F0F0;
    border-bottom:  1px solid #d0d0d0;
}
.talk{
    width: 100%;
    height: 30%;
    overflow: hidden;
    background-color: #F0F0F0;
    position: relative;
}
.write{
    width: 100%;
    height: 75%;
    padding: 10px;
    outline: none;
    overflow-x: hidden;
    overflow-y: auto;
    word-break: break-word;
    word-wrap: break-word;
    font-size: 16px;
}
.send{
    position: absolute;
    width: 10%;
    height: 15%;
    right: 10px;
    bottom: 10px;
}
</style>